<template>
	<view class="">
		<map id="map"  :polyline="polyline" :longitude="longitude" :latitude="latitude" name=""></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'',
                longitude:"",
                polyline:null,
                latitude:"",
                lat:'',
                lng:""
			};
		},
		onLoad(opt) {
            this.lat =opt.lat
            this.lng = opt.lng
            this.getLocationAuth()
			this.buttonDriving()
		},
		methods: {
           getLocationAuth() {
           	let that = this;
           	uni.getSystemInfo({
           		success(res) {
           			
           			let locationEnabled = res.locationEnabled; //判断手机定位服务是否开启
           			let locationAuthorized = res.locationAuthorized; //判断定位服务是否允许微信授权
           			if (locationEnabled == false || locationAuthorized == false) {
           				//手机定位服务（GPS）未授权
           				uni.showModal({
           					title: '提示',
           					content: '请打开定位服务功能',
           					showCancel: false, // 不显示取消按钮
           					success: (res) => {
           						
           					}
           				})
           			} else {
           				uni.authorize({
           					scope: "scope.userLocation", //授权的类型为地理位置	
           					success: (res) => {
           						uni.getLocation({
           							type: 'gcj02',
           							geocode: true,
           							isHighAccuracy: true,
           							accuracy: "best", // 精度值为20m
           							success: function(res) {
           								let lat = res.latitude;
           								let lng = res.longitude;
           								that.buttonDriving(lat,lng)
           							},
           						})
           					},
           				})
           			}
           		}
           	})
           },
			 buttonDriving(lat,lng){
			    var _this = this
			    //通过wx.request发起HTTPS接口请求
			    wx.request({
			      //地图WebserviceAPI驾车路线规划接口 请求路径及参数（具体使用方法请参考开发文档） ,
			      url: `https://apis.map.qq.com/ws/direction/v1/driving/?key=2RDBZ-GQVKA-ZZLKN-CGDUZ-FZ5LK-67F2G&from=${34.803921},${113.653484}&to=${_this.lat},${_this.lng}`,
			      success(res){
                      console.log(res)
			        var result = res.data.result
			        var route = result.routes[0]
			        
			        var coors = route.polyline, pl = [];
			          //坐标解压（返回的点串坐标，通过前向差分进行压缩）
			          var kr = 1000000;
			          for (var i = 2; i < coors.length; i++) {
			            coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
			          }
			          //将解压后的坐标放入点串数组pl中
			          for (var i = 0; i < coors.length; i += 2) {
			            pl.push({ latitude: coors[i], longitude: coors[i + 1] })
			          }
			         
			            // 将路线的起点设置为地图中心点
			              _this.latitude=pl[0].latitude
			              _this.longitude=pl[0].longitude
			            // 绘制路线
			            _this.polyline=[{
			              points: pl,
			              color: '#58c16c',
			              width: 6,
			              borderColor: '#2f693c',
			              borderWidth: 1
			            }]
			        
			      }
			    })
			  }
		}
	}
</script>

<style lang="scss" scoped>
	.messageBox {
		min-height: 100vh;
		background-color: RGBA(245, 245, 245, 1);
		padding: 24rpx 0rpx;

		.cardItem {
			width: 710rpx;
			height: 200rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9, 2, 4, 0.03);
			border-radius: 12rpx;
			margin: 0 auto;
			padding: 33rpx 28rpx 0rpx;
			font-size: 24rpx;
			color: rgba(85, 85, 85, 1);
            margin-bottom: 20rpx;
			.titleText {
				display: flex;
				justify-content: space-between;

				.t1 {
					font-size: 26rpx;
					color: #222222;
				}
			}

			.cardInfo {
				width: 645rpx;
				height: 70rpx;
				line-height: 40rpx;
				margin-top: 32rpx;
				overflow: hidden;
				/*文本溢出隐藏*/
				text-overflow: ellipsis;
				/*显示成省略号*/
				display: -webkit-box;
				/*对象作为伸缩盒子模型展示，我不太懂这条*/
				-webkit-line-clamp: 3;
				/*第三行开始省略*/
				-webkit-box-orient: vertical;
				/*设置或检索伸缩盒对象的子元素的排列方式 */
			}
		}
	}
    #map{
        width:100%;height: 100vh;
    }
</style>